// 在Raect中，组件名必须大写

// 在React中，路由并不是单独的写一个文件，而是在jsx中写入的
// 配置如下
// HashRouter:路由的样式hash路由，是加#的
// BrowserRouter:vue中的histoyr路由
// Routes:路由器，相当于Router
// Route:就是单个路由
// Link:类似于view-link,就是用来跳转的
import { HashRouter, BrowserRouter, Route, Routes, useRoutes } from "react-router-dom";

// react-redux中的方法，可以将仓库的数据提供给组件使用，也就是将数据给到组件的子子孙孙，但是组件想要使用
// 还是需要另外一个东西接收，就是拿到，相当于已经将状态放在了餐桌上，但是想要吃，你就得拿
import { Provider } from 'react-redux'
import store from "@/store/index"


// 路由的所有功能都要写在HashRouter中
// element功能就是用来放置路由的跳转对象的jsx内容
import 'antd/dist/antd.variable.min.css';

// React中使用的组件库是antd,具体的版本引入需要看需求
// antd组件的演示直接全部引入到public中的index文件中，因为react的项目也是挂载到这个上面的，可以直接使用

import Dashboard from "@/pages/dashboard"
import Goodlist from "@/pages/good/goodList"
import Goodform from "@/pages/good/goodForm"
import User from "@/pages/user"


// 二级路由是在一级路由下面来展示的  通常是挂在一级路由下面的
// 像现在这种二级路由就是
// 而且一级路由是不需要指定出口的，因为一级路由就是直接在页面上显示
// 但是二级路由需要通过 一级路由所显示的页面来显示二级路由的页面
// 也就是说，二级路由的东西是写在一级路由页面上的
// 二级路由是一个内容，一级路由也是一个内容  但是一级路由上溜了区域给二级路由展示

// 不将路由地址写死  通过动态路由的内容来配置路由的内容

import { asyncRoutes } from '@/pages/index.jsx'
import Permission from '@/Permission.jsx'


// function createRoutes(asyncRoutes) {
//     let result = []
//     asyncRoutes.forEach(route => {
//         // 先考虑二级路由 再根据里面有没有菜单来进行计算
//         if (route.path && route.element) {
//             result.push(
//                 <Route key={route.key} path={route.path} element={route.element}></Route>
//             )
//         }
//         if (route.children) {
//             route.children.forEach(route => {
//                 result.push(
//                     <Route key={route.key} path={route.path} element={route.element}></Route>
//                 )
//             })
//         }
//     })
//     return result
// }
// 路由的处理方式除了直接写还有另外一种方式



// function App() {
//     return (
//         <HashRouter>
//             <Provider store={store}>
//                 <Routes>
//                     <Route path="/" element={<Layout />}>
//                         {/* <Route path="/dashboard" element={<Dashboard />}></Route>
//                     <Route path="/good/list" element={<Goodlist />}></Route>
//                     <Route path="/good/edit" element={<Goodform />}></Route>
//                     <Route path="/user" element={<User />}></Route> */}
//                         {/* {
//                             createRoutes(asyncRoutes)
//                         } */}
//                     </Route>
//                     <Route path="/login" element={<Login />}></Route>
//                 </Routes>
//             </Provider>
//         </HashRouter>
//     );
// }

function App() {
    return (
        <HashRouter>
            <Provider store={store}>
                {
                    <Permission />
                }
            </Provider>
        </HashRouter>
    );
}

export default App;
